<template>
  <div
    v-show="showPop"
    class="login-out-pop animated faster"
    :class="{ fadeIn: show, fadeOut: !show }"
  >
    <div class="login-out">
      <div class="icon-close" @click="cancelFun()" />
      <p class="title">提示</p>
      <div class="handle">
        <span>是否确认退出登录？</span>
      </div>
      <div class="button-container">
        <div class="button-confirm" @click="confirmFun()">确 认</div>
        <div class="button-cancel" @click="cancelFun()">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "LoginOutPop",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPop: false,
    };
  },
  watch: {
    show(val) {
      // 留出显示关闭动画的时间
      if (!val) {
        let timer = setTimeout(() => {
          clearTimeout(timer);
          this.showPop = val;
        }, 400);
      } else {
        this.showPop = val;
      }
    },
  },
  mounted() {},
  methods: {
    cancelFun() {
      this.$emit("handle-login-out-cancel");
    },
    confirmFun(val) {
      window.localStorage.setItem("key", 0);
      localStorage.removeItem("userData");
      localStorage.removeItem("automaticlogin");
      localStorage.removeItem("userId");

      localStorage.removeItem("password");

      this.$router.push({
        path: "/login",
      });
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-out-pop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  // background: rgba(#000000, 0.6);
  .login-out {
    position: relative;
    width: 31.25vw;
    height: 10.677vw;
    padding: 2.083vw 2.3vw 0 2.601vw;
    font-size: calc(100vw / 1920);
    color: #ffffff;
    background: rgba(40, 52, 62, 0.8);
    box-sizing: border-box;
    // border: 0.052vw solid rgb(36, 89, 160);
    border: none;
    .icon-close {
      position: absolute;
      top: 0.625vw;
      right: 0.78125vw;
      height: 0.625vw;
      width: 0.625vw;
      background: url(~@/assets/imgs/icon/close2.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .title {
      text-align: left;
      color: #3d98e4;
      font-size: 22em;
    }
    .handle {
      margin-top: 1.3vw;
      text-align: left;
      font-size: 18em;
      color: #ffffff;
      display: flex;
      align-items: center;
    }
    .button-container {
      margin-top: 1.4vw;
      height: 2.083vw;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .button-confirm {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.083vw;
        width: 4.8958vw;
        background: #3d98e4;
        color: #ffffff;
        font-size: 18em;
        text-align: center;
        cursor: pointer;
      }
      .button-cancel {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.52vw;
        height: 2.083vw;
        line-height: 2.083vw;
        width: 4.8958vw;
        background: #ffffff;
        color: #3d98e4;
        text-align: center;
        font-size: 18em;
        cursor: pointer;
      }
    }
  }
  ::v-deep {
    .plate .angle > {
      i.triangle-top-left,
      i.triangle-top-right,
      i.triangle-bottom-left,
      i.triangle-bottom-right {
        width: 0.52vw;
        height: 0.52vw;
        border-width: 0.052vw;
      }
    }
  }
  p {
    margin: 0;
  }
}
</style>
